<template>
  <div class="min-h-screen p-6" style="background-color: #FAF9F5;">
    <!-- 页面头部 -->
    <div class="mb-6">
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <button
            @click="goBack"
            class="mr-4 p-2 text-gray-600 hover:text-gray-900 border border-gray-300 rounded-[0.6rem] hover:border-gray-400 transition-all duration-200 active:scale-[0.985]"
            style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
          >
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
            </svg>
          </button>
          <div>
            <h1 class="text-2xl font-bold text-gray-900">联系我们</h1>
            <p class="mt-1 text-sm text-gray-600">获取学校各部门联系方式和服务信息</p>
          </div>
        </div>
        <div class="flex items-center gap-3">
          <button
            @click="refreshData"
            class="inline-flex items-center px-3 py-2 text-sm font-medium text-gray-700 border border-gray-300 rounded-[0.6rem] hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-200 active:scale-[0.985]"
            style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
          >
            <ArrowPathIcon class="w-4 h-4 mr-2" />
            刷新
          </button>
        </div>
      </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- 主要联系方式 -->
      <div class="lg:col-span-2 space-y-6">
        <!-- 紧急联系方式 -->
        <div class="rounded-[0.6rem] border border-gray-200 p-6" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
          <div class="flex items-center mb-6">
            <ExclamationTriangleIcon class="w-6 h-6 text-red-500 mr-3" />
            <h2 class="text-lg font-medium text-gray-900">紧急联系方式</h2>
          </div>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div
              v-for="contact in emergencyContacts"
              :key="contact.id"
              class="p-4 border border-red-200 rounded-[0.6rem] bg-red-50"
            >
              <div class="flex items-center justify-between">
                <div>
                  <h3 class="text-sm font-medium text-red-900">{{ contact.name }}</h3>
                  <p class="text-xs text-red-700 mt-1">{{ contact.description }}</p>
                  <p class="text-sm font-medium text-red-900 mt-2">{{ contact.phone }}</p>
                </div>
                <a
                  :href="`tel:${contact.phone}`"
                  class="p-2 bg-red-100 rounded-lg text-red-600 hover:bg-red-200 transition-colors"
                >
                  <PhoneIcon class="w-5 h-5" />
                </a>
              </div>
            </div>
          </div>
        </div>

        <!-- 各部门联系方式 -->
        <div class="rounded-[0.6rem] border border-gray-200 p-6" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
          <h2 class="text-lg font-medium text-gray-900 mb-6">各部门联系方式</h2>
          <div class="space-y-4">
            <div
              v-for="department in departments"
              :key="department.id"
              class="border border-gray-200 rounded-[0.6rem] p-4 hover:border-gray-300 transition-all duration-200 active:scale-[0.985]"
              style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
            >
              <div class="flex items-start justify-between">
                <div class="flex-1">
                  <div class="flex items-center mb-2">
                    <component :is="department.icon" class="w-5 h-5 text-blue-500 mr-3" />
                    <h3 class="text-sm font-medium text-gray-900">{{ department.name }}</h3>
                  </div>
                  <p class="text-sm text-gray-600 mb-3">{{ department.description }}</p>
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <div class="flex items-center text-sm text-gray-700">
                      <PhoneIcon class="w-4 h-4 mr-2 text-gray-400" />
                      <span>{{ department.phone }}</span>
                    </div>
                    <div class="flex items-center text-sm text-gray-700">
                      <EnvelopeIcon class="w-4 h-4 mr-2 text-gray-400" />
                      <span>{{ department.email }}</span>
                    </div>
                    <div class="flex items-center text-sm text-gray-700">
                      <MapPinIcon class="w-4 h-4 mr-2 text-gray-400" />
                      <span>{{ department.location }}</span>
                    </div>
                    <div class="flex items-center text-sm text-gray-700">
                      <ClockIcon class="w-4 h-4 mr-2 text-gray-400" />
                      <span>{{ department.workingHours }}</span>
                    </div>
                  </div>
                </div>
                <div class="ml-4 flex flex-col gap-2">
                  <a
                    :href="`tel:${department.phone}`"
                    class="p-2 bg-blue-50 rounded-lg text-blue-600 hover:bg-blue-100 transition-colors"
                  >
                    <PhoneIcon class="w-4 h-4" />
                  </a>
                  <a
                    :href="`mailto:${department.email}`"
                    class="p-2 bg-gray-50 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors"
                  >
                    <EnvelopeIcon class="w-4 h-4" />
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 在线客服 -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <h2 class="text-lg font-medium text-gray-900 mb-6">在线客服</h2>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="p-4 border border-gray-200 rounded-lg">
              <div class="flex items-center mb-3">
                <ChatBubbleLeftRightIcon class="w-5 h-5 text-green-500 mr-3" />
                <h3 class="text-sm font-medium text-gray-900">微信客服</h3>
              </div>
              <p class="text-sm text-gray-600 mb-3">扫描二维码添加微信客服</p>
              <div class="w-32 h-32 bg-gray-100 rounded-lg flex items-center justify-center mb-3">
                <QrCodeIcon class="w-16 h-16 text-gray-400" />
              </div>
              <p class="text-xs text-gray-500">服务时间：8:00-22:00</p>
            </div>
            <div class="p-4 border border-gray-200 rounded-lg">
              <div class="flex items-center mb-3">
                <ComputerDesktopIcon class="w-5 h-5 text-blue-500 mr-3" />
                <h3 class="text-sm font-medium text-gray-900">在线咨询</h3>
              </div>
              <p class="text-sm text-gray-600 mb-3">点击按钮开始在线咨询</p>
              <button
                @click="startOnlineChat"
                class="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
              >
                开始咨询
              </button>
              <p class="text-xs text-gray-500 mt-2">服务时间：24小时</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 侧边栏 -->
      <div class="space-y-6">
        <!-- 学校信息 -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <h3 class="text-lg font-medium text-gray-900 mb-4">学校信息</h3>
          <div class="space-y-4">
            <div>
              <h4 class="text-sm font-medium text-gray-900 mb-2">学校地址</h4>
              <p class="text-sm text-gray-600">{{ schoolInfo.address }}</p>
            </div>
            <div>
              <h4 class="text-sm font-medium text-gray-900 mb-2">邮政编码</h4>
              <p class="text-sm text-gray-600">{{ schoolInfo.zipCode }}</p>
            </div>
            <div>
              <h4 class="text-sm font-medium text-gray-900 mb-2">学校网站</h4>
              <a
                :href="schoolInfo.website"
                target="_blank"
                class="text-sm text-blue-600 hover:text-blue-900 transition-colors"
              >
                {{ schoolInfo.website }}
              </a>
            </div>
            <div>
              <h4 class="text-sm font-medium text-gray-900 mb-2">官方邮箱</h4>
              <a
                :href="`mailto:${schoolInfo.email}`"
                class="text-sm text-blue-600 hover:text-blue-900 transition-colors"
              >
                {{ schoolInfo.email }}
              </a>
            </div>
          </div>
        </div>

        <!-- 交通指南 -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <h3 class="text-lg font-medium text-gray-900 mb-4">交通指南</h3>
          <div class="space-y-3">
            <div
              v-for="transport in transportGuide"
              :key="transport.id"
              class="p-3 border border-gray-200 rounded-lg"
            >
              <div class="flex items-center mb-2">
                <component :is="transport.icon" class="w-4 h-4 text-blue-500 mr-2" />
                <h4 class="text-sm font-medium text-gray-900">{{ transport.type }}</h4>
              </div>
              <p class="text-xs text-gray-600">{{ transport.description }}</p>
            </div>
          </div>
        </div>

        <!-- 常见问题 -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <h3 class="text-lg font-medium text-gray-900 mb-4">常见问题</h3>
          <div class="space-y-3">
            <div
              v-for="faq in frequentQuestions"
              :key="faq.id"
              class="cursor-pointer"
              @click="toggleFaq(faq.id)"
            >
              <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                <h4 class="text-sm font-medium text-gray-900">{{ faq.question }}</h4>
                <ChevronDownIcon
                  :class="[
                    'w-4 h-4 text-gray-400 transition-transform',
                    expandedFaqs.includes(faq.id) ? 'rotate-180' : ''
                  ]"
                />
              </div>
              <div
                v-if="expandedFaqs.includes(faq.id)"
                class="mt-2 p-3 bg-gray-50 rounded-lg"
              >
                <p class="text-sm text-gray-600">{{ faq.answer }}</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 意见反馈 -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <h3 class="text-lg font-medium text-gray-900 mb-4">意见反馈</h3>
          <form @submit.prevent="submitFeedback">
            <div class="space-y-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">反馈类型</label>
                <select
                  v-model="feedbackForm.type"
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                >
                  <option value="suggestion">建议</option>
                  <option value="complaint">投诉</option>
                  <option value="question">咨询</option>
                  <option value="other">其他</option>
                </select>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">反馈内容</label>
                <textarea
                  v-model="feedbackForm.content"
                  rows="4"
                  placeholder="请详细描述您的问题或建议..."
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                  required
                ></textarea>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">联系方式（可选）</label>
                <input
                  v-model="feedbackForm.contact"
                  type="text"
                  placeholder="手机号或邮箱"
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                />
              </div>
              <button
                type="submit"
                class="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
              >
                提交反馈
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '../../stores/app'
import {
  ArrowPathIcon,
  ExclamationTriangleIcon,
  PhoneIcon,
  EnvelopeIcon,
  MapPinIcon,
  ClockIcon,
  ChatBubbleLeftRightIcon,
  ComputerDesktopIcon,
  QrCodeIcon,
  ChevronDownIcon,
  AcademicCapIcon,
  BuildingOfficeIcon,
  CurrencyDollarIcon,
  HomeIcon,
  UserGroupIcon,
  HeartIcon,
  TruckIcon,
  TrainIcon
} from '@heroicons/vue/24/outline'

// 使用stores和router
const appStore = useAppStore()
const router = useRouter()

// 响应式数据
const emergencyContacts = ref([])
const departments = ref([])
const schoolInfo = ref({})
const transportGuide = ref([])
const frequentQuestions = ref([])
const expandedFaqs = ref([])

const feedbackForm = ref({
  type: 'suggestion',
  content: '',
  contact: ''
})

// 方法
const loadContactData = async () => {
  // 模拟加载联系数据
  emergencyContacts.value = [
    {
      id: 1,
      name: '校园安全',
      description: '校园紧急情况处理',
      phone: '110'
    },
    {
      id: 2,
      name: '医疗急救',
      description: '校医院急诊科',
      phone: '120'
    },
    {
      id: 3,
      name: '学生处值班',
      description: '学生事务紧急处理',
      phone: '010-12345678'
    },
    {
      id: 4,
      name: '宿管值班',
      description: '宿舍相关紧急事务',
      phone: '010-12345679'
    }
  ]

  departments.value = [
    {
      id: 1,
      name: '学生处',
      description: '负责学生事务管理、奖助学金、学生活动等',
      phone: '010-12345678',
      email: 'student@university.edu.cn',
      location: '行政楼201室',
      workingHours: '周一至周五 8:00-17:00',
      icon: UserGroupIcon
    },
    {
      id: 2,
      name: '教务处',
      description: '负责教学管理、课程安排、成绩管理等',
      phone: '010-12345680',
      email: 'academic@university.edu.cn',
      location: '行政楼301室',
      workingHours: '周一至周五 8:00-17:00',
      icon: AcademicCapIcon
    },
    {
      id: 3,
      name: '财务处',
      description: '负责学费缴纳、财务咨询、发票开具等',
      phone: '010-12345681',
      email: 'finance@university.edu.cn',
      location: '行政楼101室',
      workingHours: '周一至周五 8:30-16:30',
      icon: CurrencyDollarIcon
    },
    {
      id: 4,
      name: '宿管中心',
      description: '负责宿舍管理、住宿安排、维修报修等',
      phone: '010-12345682',
      email: 'dormitory@university.edu.cn',
      location: '学生公寓管理中心',
      workingHours: '24小时值班',
      icon: HomeIcon
    },
    {
      id: 5,
      name: '招生办',
      description: '负责招生咨询、录取查询、入学手续等',
      phone: '010-12345683',
      email: 'admission@university.edu.cn',
      location: '行政楼401室',
      workingHours: '周一至周五 8:00-17:00',
      icon: BuildingOfficeIcon
    },
    {
      id: 6,
      name: '校医院',
      description: '负责学生医疗保健、体检、健康咨询等',
      phone: '010-12345684',
      email: 'hospital@university.edu.cn',
      location: '校医院',
      workingHours: '24小时急诊，门诊8:00-17:00',
      icon: HeartIcon
    }
  ]

  schoolInfo.value = {
    address: '北京市海淀区学院路123号',
    zipCode: '100083',
    website: 'https://www.university.edu.cn',
    email: 'info@university.edu.cn'
  }

  transportGuide.value = [
    {
      id: 1,
      type: '地铁',
      description: '地铁4号线学院路站，出站后步行10分钟',
      icon: TrainIcon
    },
    {
      id: 2,
      type: '公交',
      description: '乘坐123路、456路到学院路口站下车',
      icon: TruckIcon
    },
    {
      id: 3,
      type: '自驾',
      description: '校内设有访客停车场，需提前预约',
      icon: TruckIcon
    }
  ]

  frequentQuestions.value = [
    {
      id: 1,
      question: '如何查询录取结果？',
      answer: '可以登录招生网站或拨打招生办电话010-12345683查询录取结果。'
    },
    {
      id: 2,
      question: '学费如何缴纳？',
      answer: '可以通过网上银行、支付宝、微信等方式在线缴费，也可以到财务处现场缴费。'
    },
    {
      id: 3,
      question: '宿舍如何申请？',
      answer: '新生可以在报到系统中在线申请宿舍，也可以到宿管中心现场办理。'
    },
    {
      id: 4,
      question: '忘记密码怎么办？',
      answer: '可以通过系统的找回密码功能重置，或联系学生处协助处理。'
    }
  ]
}

const startOnlineChat = () => {
  appStore.showNotification('在线客服功能开发中，请稍后再试', 'info')
}

const toggleFaq = (faqId) => {
  const index = expandedFaqs.value.indexOf(faqId)
  if (index > -1) {
    expandedFaqs.value.splice(index, 1)
  } else {
    expandedFaqs.value.push(faqId)
  }
}

const submitFeedback = async () => {
  try {
    // 模拟提交反馈
    appStore.showNotification('反馈提交成功，我们会尽快处理', 'success')
    feedbackForm.value = {
      type: 'suggestion',
      content: '',
      contact: ''
    }
  } catch (error) {
    appStore.showNotification('提交失败，请重试', 'error')
  }
}

const refreshData = async () => {
  try {
    await loadContactData()
    appStore.showNotification('数据刷新成功', 'success')
  } catch (error) {
    appStore.showNotification('刷新失败，请重试', 'error')
  }
}

// 返回首页
const goBack = () => {
  router.push('/student/home')
}

// 生命周期
onMounted(() => {
  loadContactData()
})
</script>